// userInfo
.user_info {
  height: 13vh;
  display: flex;
  align-items: center;
}
.user_avatar {
  height: 6vw;
  width: 6vw;
}
.user_info_text{
  display: flex;
  flex-direction: column;
  position: relative;
  left: 30px;
}
.user_name{
  font-size: 20px;
  color: #51bfd6;
}
.user_info_text div {
  flex: 1;
  text-align: left;
  letter-spacing: 2px;
}

//hotList
.hot_main{
  height: 40vh;
}
.hot_chart {
  width: 100%;
  height: 100%;
}
//stylelist
.style_main{
  height: 20vh;
}
.style_chart {
  width: 100%;
  height: 100%;
}
//play_main
.play_main{
  height: 30vh;
}
.play_chart {
  width: 100%;
  height: 100%;
}
//hottopic
.topic_header{
  display: flex;
  justify-content: space-around;
  div{
    flex: 1;
    display: grid;
    place-items: center;
  }
}
.topic_main{
  position: relative;
  top: 20px;
}


